<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <el-row
          class="mr_vertical_10"
          type="flex"
          justify="space-between"
          :gutter="20"
        >
          <el-col :span="6"><Quotation :rowData="rowData" :detailData="detailData"/></el-col>
          <el-col :span="18"><AssociatedOrder :detailData="detailData"/></el-col>
        </el-row>
      </template>
    </BaseSlot>
    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      width="60%"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :action="action"
        @selected="selectedf"
        @close="dlgVib = false"
        @refresh="init"
      />
      <el-row type="flex" justify="center">
        <el-button
          size="small"
          type="primary"
          @click="
            () => {
              $refs.dlgCpt.submit();
            }
          "
          >确定</el-button
        >
        <el-button size="small" @click="dlgVib = false">关闭</el-button>
      </el-row>
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Quotation from "./common/quotation.vue";
import AssociatedOrder from "./common/associatedOrder.vue";

@Component({
  components: {
    BaseSlot,
    Quotation,
    AssociatedOrder,
  },
})
export default class MyApplication extends Vue {
  protected rowData: any = {};
  protected detailData: any = {
    created_at: 0
  };
  protected created() {
    if (this.$route.params) {
      this.rowData = this.$route.query;
      this.init();
    }
  }
  protected async init() {
    await this.$api
      .getOffersGet({ offer_no: this.rowData.offer_no })
      .then((response: any) => {
        this.$set(this, "detailData", response.data);
      });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
.cardStyle {
  .el-card {
    background: rgba(7, 123, 232, 0.05);
    .fontStyle {
      color: #077be8;
      font-size: 16px;
      line-height: 36px;
    }
    .numberStyle {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
</style>


